<%--
  Created by IntelliJ IDEA.
  User: mona
  Date: 2020/5/29
  Time: 9:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>汽车管理</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../element-ui/element.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/cln/css/carmanage.css">
</head>
<body>
<script src="../../vue/vue.js"></script>
<script src="../../vue/vue.min.js"></script>
<script src="../element-ui/element.js"></script>
<script src="../../jquery/jquery-3.4.1.js"></script>
<div id="app">
    <template>
        <el-row :gutter="24">
            <el-col :span="22" :offset="1">
                <div class="pro">
                    <%--
                        :header-cell-style="thStyleFun"  表头样式
                        :cell-style="cellStyleFun"  每一个单元格样式
                     --%>
                    <el-table :data="list" style="width: 100%;margin: 0 auto;" :header-cell-style="thStyleFun"
                              :cell-style="cellStyleFun">
                        <el-table-column label="汽车编号" prop="carId">
                        </el-table-column>
                        <el-table-column label="图片" prop="carImg">
                            <template slot-scope="scope">
                                <img :src=" 'http://qdl9h2nk4.bkt.clouddn.com/'+ scope.row.carImg" class="pimg">
                            </template>
                        </el-table-column>
                        <el-table-column label="品牌" prop="brandName">
                            <template slot-scope="scope">
                                {{scope.row.brandName}}
                            </template>
                        </el-table-column>
                        <el-table-column label="车系" prop="seriesName">
                            <template slot-scope="scope">
                                {{scope.row.seriesName}}
                            </template>
                        </el-table-column>
                        <el-table-column label="车型" prop="carType">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column label="基本信息" prop="baseId">
                            <template slot-scope="scope">
                                {{scope.row.baseId}}
                            </template>
                        </el-table-column>
                        <el-table-column align="right">
                            <template slot="header" slot-scope="scope">
                                <el-button @click="dialogFormVisible = true">添加商品</el-button>
                            </template>
                            <template slot-scope="scope">
                                <el-row :gutter="24">
                                    <el-col :span="12">
                                        <el-button size="mini" @click="showProducts(scope.row)">Edit</el-button>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-button size="mini" type="danger" @click="deletebrand(scope.$index, scope.row)">Delete</el-button>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--分页-->
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="pageNum"
                                :page-size="pageSize"
                                :pager-count="4"
                                layout="prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                    <!--添加商品弹框-->
                    <el-dialog title="添加商品" :visible.sync="dialogFormVisible" width="30%">
                        <el-form :model="{form}">
                            <el-form-item label="图片" :label-width="formLabelWidth">
                                <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false"
                                           :file-list="fileList"
                                           action :before-upload="beforeAvatarUpload" ref="upload"
                                           :http-request="requestUpload"
                                           style="border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="品牌" :label-width="formLabelWidth">
                                <el-input v-model="form.brand"></el-input>
                            </el-form-item>
                            <el-form-item label="车系" :label-width="formLabelWidth">
                                <el-input v-model="form.series" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="车型" :label-width="formLabelWidth">
                                <el-input v-model="form.ctype" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="基本信息" :label-width="formLabelWidth">
                                <el-input v-model="form.baseId" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="onSubmit">确 定</el-button>
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                        </div>
                    </el-dialog>

                    <!--修改商品弹框-->
                    <!--:model需要的是object型，若model报错，可以加个{}-->
                    <el-dialog title="修改商品" :visible.sync="dialogFormVisible1" width="30%">
                        <el-form :model="{getlist}">
                            <el-form-item label="图片" :label-width="formLabelWidth">
                                <template slot-scope="scope">
                                    <img :src=" 'http://qdl9h2nk4.bkt.clouddn.com/'+ getlist.carImg" class="productImg">
                                </template>
                            </el-form-item>
                            <el-form-item label="品牌" :label-width="formLabelWidth">
                                <el-input v-model="getlist.brandName"></el-input>
                            </el-form-item>
                            <el-form-item label="车系" :label-width="formLabelWidth">
                                <el-input v-model="getlist.seriesName"></el-input>
                            </el-form-item>
                            <el-form-item label="车型" :label-width="formLabelWidth">
                                <el-input v-model="getlist.carType"></el-input>
                            </el-form-item>
                            <el-form-item label="基本信息" :label-width="formLabelWidth">
                                <el-input v-model="getlist.baseId"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="editBrand">确 定</el-button>
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </template>
</div>
</body>
<script>
    var Main = {
        data() {
            return {
                list: [],
                getlist: [],
                search: '',
                dialogFormVisible: false,
                dialogFormVisible1: false,
                form: {
                    img: '',
                    brand: '',
                    series: '',
                    ctype: '',
                },
                formLabelWidth: '120px',
                total: 1,//总条数  默认值不能为空
                pageSize: 4,//每页显示几条数据
                pageNum: 1,//当前页
                pages: 1,//总页数
                startRow: '',//起始页
                endRow: '',//结束页
                fileList: [],//上传文件列表
                formdata: new FormData(),
                // actionPath:'http(s)://upload.qiniup.com',//上传到七牛云的地址
                imageUrl: '',//上传图片的地址,
                imgName: '',//返回的图片名称
                carId: '',
                brandId: '',
                seriesId: ''
            }
        },
        created() {
            this.getCar();
        },
        computed: {
            // 这里定义上传文件时携带的参数，即表单数据
            postData: function () {
                return this.form;
            }
        },
        methods: {
            // 获取汽车
            getCar() {
                var _this = this;
                $.ajax({
                    type: 'get',
                    url: '/forum/car/CarManage',
                    dataType: 'json',
                    data: "pageNum=" + this.pageNum + "&pageSize=" + this.pageSize,
                    success: function (data) {
                        console.log(data.data);
                        if (data.state === '200') {
                            _this.list = data.data.list;
                            _this.getlist = data.data.list;
                            _this.pageNum = data.data.pageNum;//当前页码
                            _this.total = data.data.total;//总条数
                            _this.pages = data.data.pages;//总页数
                        }
                    }
                })
            },
            thStyleFun() {
                return 'text-align:center'
            },
            cellStyleFun() {
                return 'text-align:center'
            },

            //删除品牌
            deletebrand(index, row) {
                var that = this;
                console.log(index, row);
                $.ajax({
                    method: 'post',
                    url: '/forum/brand/deleteBrand',
                    data: {
                        brandId: row.brandId,
                    },
                    success: function (data) {
                        if (data.state === '200') {
                            console.log(data);
                            that.deleteSeries(index, row);
                        } else {
                            that.$message.error('删除失败');
                        }
                    }
                })
            },

            //删除车系
            deleteSeries(index, row) {
                var that = this;
                console.log(index, row);
                $.ajax({
                    method: 'post',
                    url: '/forum/series/deleteSeries',
                    data: {
                        seriesId: row.seriesId,
                    },
                    success: function (data) {
                        if (data.state === '200') {
                            console.log(data);
                            that.deleteCarType(index, row);
                        } else {
                            that.$message.error('删除失败');
                        }
                    }
                })
            },

            //删除车型
            deleteCarType(index, row) {
                var that = this;
                console.log(index, row);
                $.ajax({
                    method: 'post',
                    url: '/forum/car/deleteCar',
                    data: {
                        carId: row.carId,
                    },
                    success: function (data) {
                        if (data.state === '200') {
                            console.log(data);
                            that.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            window.location.reload();
                        } else {
                            that.$message.error('删除失败');
                        }
                    }
                })
            },

            //element行点击方法  获取该行数据
            showProducts(row) {
                var _this = this;
                _this.dialogFormVisible1 = true;
                _this.carId = row.carId;
                _this.getlist = row;
            },
            //添加 （表单提交）
            onSubmit() {
                var _this = this;
                _this.dialogFormVisible = false;
                console.log("表单提交了！", _this.form);
                console.log(this.form.img);
                _this.$refs.upload.submit();       //开始上传文件
            },
            //添加品牌
            addBrand() {
                var _this = this;
                console.log(this.form.brand);
                $.ajax({
                    method: 'post',
                    url: '/forum/brand/insertBrand',
                    data: {
                        brandName: this.form.brand,
                    },
                    success: function (data) {
                        // console.log(data)
                        if (data.state === '200') {
                            _this.getBrandId(_this.form.brand);
                        } else {
                            _this.$message.error('添加失败');
                        }
                    }
                })
            },
            //获取BrandId
            getBrandId(brand) {
                var _this = this;
                $.ajax({
                    method: 'post',
                    url: '/forum/brand/selectBrand',
                    data: {
                        brandName: brand,
                    },
                    success: function (data) {
                        console.log(data.data);
                        if (data.state === '200') {
                            _this.brandId = data.data.brandId;
                            console.log(_this.brandId);
                            _this.addSeries();
                        } else {
                            _this.$message.error('添加失败');
                        }
                    }
                })
            },

            //添加车系
            addSeries() {
                var _this = this;
                console.log(this.form.series);
                $.ajax({
                    method: 'post',
                    url: '/forum/series/insertSeries',
                    data: {
                        seriesName: this.form.series,
                    },
                    success: function (data) {
                        // console.log(data.data)
                        if (data.state === '200') {
                            _this.getSerieisId(_this.form.series)
                        } else {
                            _this.$message.error('添加失败');
                        }
                    }
                })
            },
            //获取SeriesId
            getSerieisId(series) {
                var _this = this;
                $.ajax({
                    method: 'post',
                    url: '/forum/series/selectSeries',
                    data: {
                        seriesName: series,
                    },
                    success: function (data) {
                        console.log(data.data);
                        if (data.state === '200') {
                            _this.seriesId = data.data.seriesId;
                            console.log(_this.seriesId);
                            _this.addCarType();
                        } else {
                            _this.$message.error('添加失败');
                        }
                    }
                })
            },

            //添加车型
            addCarType() {
                var _this = this;
                console.log(this.form.ctype);
                console.log(this.form.img);
                $.ajax({
                    method: 'post',
                    url: '/forum/car/insertCar',
                    data: {
                        carType: _this.form.ctype,
                        seriesId: _this.seriesId,
                        brandId: _this.brandId,
                        baseId: _this.form.baseId,
                        carImg: _this.form.img
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.state === '200') {
                            _this.dialogFormVisible = false;
                            _this.$message({
                                message: "添加成功",
                                type: "success"
                            });
                            window.location.reload();
                        } else {
                            _this.$message.error('添加失败');
                        }
                    }
                })
            },

            //修改品牌
            editBrand() {
                var that = this;
                console.log(that.getlist);
                $.ajax({
                    method: 'post',
                    url: '/forum/brand/updateBrand',
                    data: {
                        brandName: that.getlist.brandName,
                        brandId: that.getlist.brandId,
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.state === '200') {
                            that.editSeries();
                        } else {
                            that.$message.error('修改失败');
                        }
                    }
                })
            },

            //修改车系
            editSeries() {
                var that = this;
                // console.log(that.getlist)
                $.ajax({
                    method: 'post',
                    url: '/forum/series/updateSeries',
                    data: {
                        seriesName: that.getlist.seriesName,
                        seriesId: that.getlist.seriesId,
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.state === '200') {
                            that.editCarType();
                        } else {
                            that.$message.error('修改失败');
                        }
                    }
                })
            },

            //修改车型
            editCarType() {
                var that = this;
                // console.log(that.getlist)
                $.ajax({
                    method: 'post',
                    url: '/forum/car/updateCar',
                    data: {
                        carType: that.getlist.carType,
                        carId: that.getlist.carId,
                        brandId: that.getlist.brandId,
                        seriesId: that.getlist.seriesId,
                        baseId: that.getlist.baseId,
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.state === '200') {
                            that.dialogFormVisible1 = false;
                            that.$message({
                                message: "修改成功",
                                type: "success"
                            });
                        } else {
                            that.$message.error('修改失败');
                        }
                    }
                })
            },

            //文件上传组件submit触发的请求事件
            requestUpload(param) {
                //params不是简单的字面量对象，而是一个FormData实例对象
                let formData = new FormData();
                formData.append('file', param.file);
                var _this = this;
                $.ajax({
                    method: 'post',
                    url: '/forum/car/uploadPic',
                    data: formData,
                    processData: false,  // 增加这一行，不处理参数
                    contentType: false,    //不可缺
                    dataType: 'json',
                    success: function (data) {
                        console.log(data.data);
                        if (data.state === "200") {
                            _this.form.img = data.data;
                            _this.$message({
                                message: "文件上传成功",
                                type: "success"
                            });
                            _this.addBrand();
                        }
                        if (data.state === "0") {
                            _this.$message({
                                message: "文件上传失败",
                                type: "error"
                            });
                        }
                    }
                })
            },
            //上传之前进行的操作,可以限制上传文件的大小,类型等
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //每页显示几条
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.getCar()
            },
            //当前页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getCar()
            }
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount("#app");


</script>
</html>
